<template>
  <ZForm
    :fields="profileFields"
    :initial-values="profile"
    :schema="profileSchema"
    @submit="onSubmit"
  >
    <div class="flex gap-1 justify-end">
      <ZButton
        class="mt-2"
        color="secondary"
        icon-class="icon-[mdi--restart] size-6"
        @click="refetch"
        :loading="isProfileLoading || isUpdatingProfile"
      >
        重 置
      </ZButton>
      <ZButton
        class="mt-2"
        color="primary"
        icon-class="icon-[mdi--content-save] size-6"
        type="submit"
        :loading="isProfileLoading || isUpdatingProfile"
      >
        保 存
      </ZButton>
    </div>
  </ZForm>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { z } from "zod";
import type { FormFields } from "@/components/form/types";
import ZForm from "@/components/form/ZForm.vue";
import ZButton from "@/components/ui/ZButton.vue";

import { useMutation, useQuery } from "@pinia/colada";
import { getProfile, updateProfile } from "@/apis/user";
import type { SubmissionContext } from "vee-validate";
import type { Profile, User } from "@/stores";

const emit = defineEmits<{
  success: [User];
}>();

const profileSchema = z.object({
  number: z.string().min(1, "学号不能为空").max(32, "学号最多32个字符"),
  name: z.string().min(1, "姓名不能为空").max(16, "姓名最多16个字符"),
  gender: z.enum(["MALE", "FEMALE"]).optional(),
  class: z.string().min(1, "班级不能为空").max(16, "班级最多16个字符"),
  college: z.string().min(1, "学院不能为空").max(16, "学院最多16个字符"),
  major: z.string().min(1, "专业不能为空").max(16, "专业最多16个字符"),
});

const profileFields: FormFields = [
  {
    name: "number",
    label: "学号",
    type: "text",
    inputAttributes: {
      placeholder: "请输入学号",
    },
  },
  {
    name: "name",
    label: "姓名",
    type: "text",
    inputAttributes: {
      placeholder: "请输入姓名",
    },
  },
  {
    name: "gender",
    label: "性别",
    type: "select",
    options: [
      {
        label: "男",
        value: "MALE",
      },
      {
        label: "女",
        value: "FEMALE",
      },
    ],
  },
  {
    name: "class",
    label: "班级",
    type: "text",
    inputAttributes: {
      placeholder: "请输入班级",
    },
  },
  {
    name: "college",
    label: "学院",
    type: "text",
    inputAttributes: {
      placeholder: "请输入学院",
    },
  },
  {
    name: "major",
    label: "专业",
    type: "text",
    inputAttributes: {
      placeholder: "请输入专业",
    },
  },
];
const {
  data: profileData,
  isLoading: isProfileLoading,
  refetch,
} = useQuery({
  key: ["profile"],
  query: getProfile,
});
const profile = ref<Partial<Profile>>({
  number: "",
  name: "",
  gender: "MALE",
  class: "",
  college: "",
  major: "",
});
watch(
  profileData,
  (val) => {
    if (val?.success) {
      profile.value = val.object.profile!;
    }
  },
  { immediate: true }
);

const { mutateAsync: updateProfileMutate, isLoading: isUpdatingProfile } =
  useMutation({
    mutation: updateProfile,
  });

async function onSubmit(
  values: z.infer<typeof profileSchema>,
  { setErrors }: SubmissionContext
) {
  const data = await updateProfileMutate(values);
  if (data.success) {
    emit("success", data.object);
  } else {
    if (data.errors) setErrors(data.errors);
  }
}
</script>
